{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{% extends "firefox/base/base-protocol.html" %}

{% from "macros-protocol.html" import split with context %}
{% from 'macros.html' import bluesky_share_url with context %}

{% block page_title %}{{ ftl('switch-switch-from-chrome') }}{% endblock %}
{% block page_desc %}{{ ftl('switch-switching-to-firefox-is-fast-updated', fallback='switch-switching-to-firefox-is-fast') }}{% endblock %}

{% block page_css %}
  {{ css_bundle('protocol-split') }}
  {{ css_bundle('firefox-switch') }}
{% endblock %}

{% block body_id %}firefox-switch{% endblock %}

{% block content %}
<main>
  {% call split(
      image=resp_img('img/firefox/switch/switch.png',
        srcset={'img/firefox/switch/switch-high-res.png': '2x'},
        optional_attributes={'class': 'mzp-c-split-media-asset'}
      ),
      media_after=True,
      media_class='mzp-l-split-h-center',
      block_class='mzp-l-split-center-on-sm-md mzp-l-split-hide-media-on-sm-md'
    ) %}
      <div class="mzp-c-wordmark mzp-t-wordmark-md mzp-t-product-firefox"></div>
      <h1 class="mzp-u-title-lg">{{ ftl('switch-switch-from-chrome') }}</h1>
      <p>{{ ftl('switch-switching-to-firefox-page-description-updated', 'switch-switching-to-firefox-page-description') }}</p>
    {% endcall %}

  <section class="c-steps mzp-l-content">
    <ol class="c-steps-list">
      <li class="c-steps-item">{{ ftl('switch-select-what-to-take') }}</li>
      <li class="c-steps-item">{{ ftl('switch-let-firefox-do-the-rest') }}</li>
      <li class="c-steps-item">{{ ftl('switch-enjoy-the-web-faster') }}</li>
    </ol>
    <div class="c-steps-cta">
    {{ download_firefox(alt_copy=ftl('switch-download-and-switch'), download_location='primary cta') }}
    </div>
  </section>

  <section class="c-share">
    <div class="mzp-l-content">

      {% if ftl_has_messages('switch-spread-the-word') %}
        <h2 class="c-share-title">{{ ftl('switch-spread-the-word') }}</h2>
      {% else %}
        <p>{{ ftl('switch-use-firefox-and-still-chrome') }} {{ ftl('switch-share-with-your-friends') }}</p>
      {% endif %}

      {% set share_url = settings.CANONICAL_URL + canonical_path %}
      <ul class="c-share-options">
        <li>
          <a class="facebook" data-link-position="social share" data-link-text="Facebook" href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]={{ share_url|urlencode }}">
            {{ ftl('switch-share-to-facebook-updated', fallback='switch-share-to-facebook') }}
          </a>
        </li>
        {% if ftl_has_messages('switch-share-to-bluesky') %}
        <li>
          <a class="bluesky" data-link-position="social share" data-link-text="Bluesky" href="{{ bluesky_share_url(share_url, ftl('switch-firefox-makes-switching-fast-tweet')) }}">
            {{ ftl('switch-share-to-bluesky') }}
          </a>
        </li>
        {% endif %}
        <li>
          {% set email_subject = ftl('switch-switch-to-firefox')|mailtoencode %}
          {% set email_intro = ftl('switch-hey')|mailtoencode %}
          {% set email_start = ftl('switch-firefox-makes-switching-fast-email')|mailtoencode %}
          {% set email_end = ftl('switch-check-it-out')|mailtoencode %}

          {% set email_body = email_intro + '%0D%0A%0D%0A' + email_start + '%0D%0A%0D%0A' + email_end + '%20' + share_url|urlencode %}
          <a class="email" data-link-position="social share" data-link-text="Email" href="{{ 'mailto:?subject=%s&body=%s'|format(email_subject, email_body)|e }}">
            {{ ftl('switch-send-an-email') }}
          </a>
        </li>
      </ul>

      <p>{{ ftl('switch-still-not-convinced') }} <a href="https://support.mozilla.org/kb/switching-chrome-firefox">{{ ftl('ui-learn-more') }}</a></p>
    </div>
  </section>
</main>
{% endblock %}
